想要成為 Unity Canvas UI (UGUI) 的排版大師，那麼我們就一定要充分了解 UGUI 最基礎的排版類別 RectTransform ，它屬於 Transform 的子類別，用於描述元件如何擺放在二維介面中，既然是在二維介面中元件的 Transform，那麼叫做 Rect 的 Transform 也是很合理的吧！關於 RectTransform 的官方技術文件我們可以在 Unity - Manual: Rect Transform 找得到。

快速控制器的基本操作我們就不在這裡贅述，基本上都可以在 Unity 網站裡找到很好的教學文件與影片。

在透過快速設定器修改 RectTransform 的過程中，你會發現右上區域會隨著不同的配置出現不同的屬性設定如下圖：

Pos X 與 Left、Pos Y 與 Top、Width 與 Right、Height 與 Bottom 這四對屬性個別不會同時出現，有 Pos X 就沒有 Left，有 Width 就沒有 Right，那麼他們出現的規則是什麼呢？

簡單來說其實就是：

「當兩個錨點的某一維度值相等時，該維度的尺寸則是固定的（跟 Parent 尺寸無關），反之該維度的尺寸則是相對於 Parent 的尺寸而變化。」

其實全部都取決於控制 RectTransform 型態最重要的屬性「最大與最小錨點們（Min / Max Anchors）」，而快速設定器其實也只是在幫你快速的調整這兩個錨點的值，所以只要了解這兩個設定值關係與行為，其實你已經完全掌握了 RectTransform ，而依照上述邏輯，透過兩個錨點所產生出的配置型態總共有四種：

A. 當兩錨點 x, y 維度的值都相等時。 B. 當兩錨點 x 維度的值不相等、y 維度值相等時。 C. 當兩錨點 x 維度的值相等、y 維度值不相等時。 D. 當兩錨點 x, y 維度的值都不相等時。

當兩錨點 x, y 值都相等時，代表此物件的寬高尺寸都是固定值，所以我們會透過 PosX、PosY、Width 以及 Height 來定義此物件的顯示方式，PosX 與 PosY 則分別表示錨點到物件 Pivot 點的位移，而此物件的實際顯示區域則會受到 Pivot 的 x, y 值設定所影響。

當兩錨點 x 維度的值不相等、y 維度值相等時，代表 x 維度的尺寸會受到 Parent 的尺寸影響，在 x 維度上則是使用間距（Padding）的概念來排版，所以會用到 Left、PosY、Right 以及 Height，實際的 Width 是由 Left 與 Right 來控制。

當兩錨點 x 維度的值相等、y 維度值不相等時，代表 y 維度的尺寸會受到 Parent 的尺寸影響，在 y 維度上則是使用間距（Padding）的概念來排版，所以會用到 PosX、Top、Width 以及 Bottom，實際的 Height 是由 Top 與 Bottom 來控制。

當兩錨點 x, y 維度的值都不相等時，代表物件的寬高尺寸都會受到 Parent 的影響，完全是使用四個方向的間距來定義此物件的顯示區域 Left、Top、Right 以及 Bottom。

當我們充分瞭解了 RectTransform 的運作原理後，我們接著就可以透過撰寫程式在程式運行中輕鬆控制排版的行為，由於 RectTransform 是 Transform 的子類別，所以直接透過轉型就可以拿到：

而所有的 UI Element 也都可以直接透過屬性 rectTranform 獲得：

在使用程式碼控制 RectTranform 之前，我們必須清楚了解各屬性實際代表的意義，才不會在執行時出現非預期的排版狀況，其中最常見的錯誤就是把 sizeDelta 誤認為在設定真正的 size，或是把父類別的 localPosition 當作 anchoredPosition 來用，下圖為所有參數的幾何關係圖：

sizeDelta 根據文件定義是：The size of this RectTransform relative to the distances between the anchors.

所以 RectTransform 真正的計算出的 rect.width 會等於 (anchorMax.x - anchorMin.x) * Parent.rect.width + sizeDelta.x

同理

rect.height 會等於 (anchorMax.y - anchorMin.y) * Parent.rect.height + sizeDelta.y

意思就是 sizeDelta 個別維度的值是跟兩錨點個別維度的差值相關，所以只有當兩錨點某的維度的值相等的時候，sizeDelta 在此維度的值才會剛好等於最後顯示的 size 大小。

而 offsetMin 則代表 Min 錨點到物體顯示區域左下角點的向量（注意正反方向）；offsetMax 則代表 Max 錨點到物體顯示區域右上角點的向量，這就是為什麼 offsetMax 的值跟編輯器中 Top、Right 值剛好正負相反的原因。

為了方便使用對齊功能，我們將各種對齊行為透過 FDRectAlignment 列舉（enum）來表達：

接著我們就來擴充 RectTransform 類別對齊的方法：

完成後我們就可以在其他地方輕鬆動態使用對齊：

但這樣的方式只有針對物體的 Pivot 做對齊，為了達到針對物體的內實體容 （content）完全地對齊，我們則需要針對 pivot 一併修改（預設是 true），就像 Unity 內建控制器提供的功能一樣：

為了使方法更好利用，我們可以再另外實作一組加上位移（offset）以及尺寸（size）設定的方法：

為了方便設定成延展排版模式，我們一樣先定義延展的列舉，總共有七種延展的模式：

由第二節我們所知道的，當延展的方向不同時，我們則需要不同的幾何參數來決定正確設定這個 RectTransform：

當屬於水平延展時，我們需要的參數是 left、offsetY (posY)、right 以及 height 如 SetStretchHorizontalRect 方法：（此處函式參數名稱使用 padding 前綴自來強調排版的行為）

如果屬於垂直延展時，我們需要的參數則是 offsetX (posX)、top、width 以及 bottom：

注意這裡的設定順序是很重要的，設定 offsetMin 以及 offsetMax 屬性的值會間接改變 anchoredPosition 與 sizeDelta ，所以必須要將這兩個設定放在後面。

接者再把要提供的功能方法實作完成就大功告成了：

RectTransform 是很方便也很常用的排版類別，但若沒搞清楚其背後的原理，往往在撰寫程式上會一頭霧水，怎麼指定位置最後顯示跟預期的不一樣，是在開始實做 UGUI 介面前需要花時間理解的重要基礎。